<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>圣杯</title>
  <style type="text/css">
    body {
      min-width: 550px;
    }

    #container {
      padding-left: 200px;
      padding-right: 150px;
    }

    #container .column {
      float: left;
    }

    #header {
      background-color: blue;
      height: 100px;
    }

    #center {
      background-color: chartreuse;
      width: 100%;
      height: 200px;
    }

    #left {
      background-color: yellow;
      width: 200px;
      margin-left: -100%;
      position: relative;
      right: 200px;
      height: 200px;
    }

    #right {
      background-color: yellow;
      width: 150px;
      margin-right: -150px;
      height: 200px;
    }

    #footer {
      clear: both;
      background-color: aquamarine;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="header">header</div>
  <div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
  <div id="footer">footer</div>
</body>

</html>